<template>
<div>
 <NavBar class="navbar">
   <div slot="left" class="navleft" @click="imgclick"><img src="~assets/img/common/back.svg"> </div>
   <div slot="center" class="detailnav">
   <div class="navlist" v-for="(item,index) in title"
        :class="{'active':index===currenindex}" @click="navclick(index)">{{item}}
   </div>
 </div></NavBar>
</div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import scroll from "@/components/common/scroll/scroll";
export default {
name: "DetailNav",
  data(){
  return{
    title:['商品','参数','评论','推荐'],
    currenindex:0
  }
  },
  components: {
  NavBar
  },
  methods:{
  navclick(index){
    this.currenindex=index
    this.$emit('itemclick',index)
  },
  imgclick(){
    this.$router.back()
  }
  }
}
</script>

<style scoped>
.navlist{
  flex: 1;
}
.detailnav{
  display: flex;
}
.active{
  color: var(--color-high-text);
}
.navleft{
  margin-top: 5px;
}



</style>
